<template>
	<cu-custom :isBack="true">
		<template #title>个人中心</template>
	</cu-custom>
	
	<view class="cu-list menu">
		<view class="cu-item">
			<view class="content">头像</view>
			<view class="action cu-avatar radius bg-gray">
				<text class="cuIcon-people"></text>
			</view>
		</view>
		
		<view class="cu-item">
			<view class="content">昵称</view>
			<view class="action">{{ userInfo.username }}</view>
		</view>
		
		<view class="cu-item">
			<view class="content">手机号</view>
			<view class="action">{{ userInfo.phone }}</view>
		</view>
		<view class="cu-item">
			<view class="content">用户编号</view>
			<view class="action">{{ userInfo.id }}</view>
		</view>
		<view class="cu-item mb-3">
			<view class="content">用户角色</view>
			<view class="action">{{ userInfo.position }}</view>
		</view>
		
		<view class="cu-item arrow feedback" @click="navToModifyPassword">
			<view class="content">
				<text class="cuIcon-edit text-orange"></text>
				<text class="text-grey">修改密码</text>
			</view>
		</view>
		<view class="cu-item arrow feedback" @click="navToFeedback">
			<view class="content">
				<text class="cuIcon-keyboard text-orange"></text>
				<text class="text-grey">问题反馈</text>
			</view>
		</view>
		
	</view>
	
	
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import store from "@/store/index.js"
import { router } from "@/router"
const userInfo = reactive(store.getters.userInfo)

const navToFeedback = () => {
	router.push("/pages/user/feedback")
}
const navToModifyPassword = () => {
	router.push("/pages/user/modifyPassword")
}
</script>

<style lang="stylus" scoped>
.feedback:active
	transition: unset
	background-color #eee
</style>